import { Input, TableColumnType } from 'antd'
import { apis } from '@/api'
import {
  AddButton,
  TablePage,
  DeleteButton,
  EnumSelect,
  SearchFormItem,
  DeleteIconButton,
  EditIconButton,
} from '@/components'
import { TableWidthConf } from '@/conf'
import { useEnumRender, useOperationColumn } from '@/hooks'
import { SexEnum, StatusEnum } from '@/types'
import { SystemUserDetail } from './SystemUserDetail'

/**
 * 可隐藏删除按钮
 */
const HiddenDeleteButton = () => {
  // 在这里引入状态的话，仅会触发该组件的渲染，其余组件子组件不会渲染
  const showDeleteButton = true
  return showDeleteButton && <DeleteButton />
}

export const SystemUserPage = () => {
  const { operationColumn } = useOperationColumn({
    buttons: [<EditIconButton key="edit" />, <DeleteIconButton key="delete" />],
    width: 200,
  })

  const queryItems: SearchFormItem[] = [
    { name: 'name', label: '姓名', children: <Input /> },
    { name: 'username', label: '用户名', children: <Input /> },
    {
      name: 'status',
      label: '状态',
      children: <EnumSelect enumDef={StatusEnum} />,
    },
    {
      name: 'sex',
      label: '性别',
      children: <EnumSelect enumDef={SexEnum} />,
    },
    { name: 'phoneNumber', label: '手机号', children: <Input /> },
  ]
  const tableColumns: TableColumnType[] = [
    { title: '姓名', dataIndex: 'name', width: TableWidthConf.normal },
    { title: '用户名', dataIndex: 'username', width: TableWidthConf.normal },
    {
      title: '性别',
      dataIndex: 'sex',
      width: TableWidthConf.mini,
      render: useEnumRender(SexEnum),
    },
    { title: '手机号', dataIndex: 'phoneNumber', width: TableWidthConf.normal },
    {
      title: '状态',
      dataIndex: 'status',
      width: TableWidthConf.status,
      render: useEnumRender(StatusEnum),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: TableWidthConf.dateTime,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      width: TableWidthConf.dateTime,
    },
    {
      title: '',
      dataIndex: '',
    },
    operationColumn,
  ]
  return (
    <TablePage
      api={apis.systemUserApi.findPage}
      queryProps={{
        items: queryItems,
      }}
      toolbar={{
        left: '用户列表',
        right: [<HiddenDeleteButton key="delete" />, <AddButton key="add" />],
      }}
      tableProps={{
        rowKey: 'id',
        columns: tableColumns,
        rowSelection: {
          fixed: true,
        },
        scroll: { x: 'max-content' },
      }}
    >
      <SystemUserDetail />
    </TablePage>
  )
}
